﻿<!--<!doctype html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="utf-8">-->
<!--  <title>链上善行公益-大数据可视化平台</title>-->
<!--  <script src="../blockchain-kindness/front/js/jquery.js"></script>-->
<!--  <link href="front/images/logo1.png" rel="shortcut icon" type="image/png">-->
<!--<link rel="stylesheet" href="../blockchain-kindness/front/css/comon0.css">-->
<!--  &lt;!&ndash; 引入 Swiper CSS &ndash;&gt;-->
<!--</head>-->
<!--	<script>-->
<!--      // 数字滚动-->
<!--	$(window).load(function(){-->
<!--             $(".loading").fadeOut()-->
<!--    })-->

<!--/****/-->
<!--$(document).ready(function(){-->
<!--	var whei=$(window).width()-->
<!--	$("html").css({fontSize:whei/20})-->
<!--	$(window).resize(function(){-->
<!--		var whei=$(window).width()-->
<!--	 $("html").css({fontSize:whei/20})-->
<!--});-->
<!--	});-->
<!--	</script>-->
<!--	<script type="text/javascript" src="../blockchain-kindness/front/js/echarts.min.js"></script>-->
<!--<body>-->
<!--<div class="canvas" style="opacity: .2">-->
<!--	<iframe frameborder="0" src="../blockchain-kindness/front/js/index.html" style="width: 100%; height: 100%"></iframe>-->
<!--	</div>-->
<!--<div class="loading">-->
<!--  <div class="loadbox"> <img src="../blockchain-kindness/front/images/donations/loading.gif"> 页面加载中... </div>-->
<!--</div>-->
<!--&lt;!&ndash;此处后续再做优化 具体优化为美化返回样式 + 链接返回处为上次&ndash;&gt;-->
<!--<div class="head">-->
<!--  <h2><a href="admin-user" style="font-size: 20px;color: #B6B9C8;position: relative;top: 18px;left: 7px">后台管理</a></h2>-->
<!--  <h2><a href="index" style="font-size: 20px;color: #B6B9C8;position: relative;top: -8px;left: 103px">返回主页</a></h2>-->
<!--  <h1><a href="#" style="color: white;pointer-events: none">爱心捐款数据分布图</a></h1>-->
<!--  <div class="weather"><img src="../blockchain-kindness/front/images/donations/weather.png"><span>多云转小雨</span><span id="showTime"></span></div>-->

<!--	<script>-->
<!--      var num;-->
<!--var t = null;-->
<!--var broad = [];-->
<!--    t = setTimeout(time,1000);//開始运行-->
<!--    function time()-->
<!--    {-->
<!--       clearTimeout(t);//清除定时器-->
<!--       dt = new Date();-->
<!--		var y=dt.getFullYear();-->
<!--		var mt=dt.getMonth()+1;-->
<!--		var day=dt.getDate();-->
<!--       var h=dt.getHours();//获取时-->
<!--       var m=dt.getMinutes();//获取分-->
<!--       var s=dt.getSeconds();//获取秒-->
<!--       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";-->
<!--       t = setTimeout(time,1000); //设定定时器，循环运行-->
<!--    }-->
<!--    $.ajax({-->
<!--      url : "/blockchain-kindness/donations/getAll",-->
<!--      type : 'GET',-->
<!--      success(resp){-->
<!--        num = resp.data.amount;-->
<!--        var elements = document.getElementsByClassName("pulll_left counter");-->
<!--        for (var i = 0; i < elements.length; i++) {-->
<!--          elements[i].innerHTML = num;-->
<!--        }-->
<!--      }-->
<!--    })-->

<!--      $.ajax({-->
<!--        url: "/blockchain-kindness/donations/getDonationsPage",-->
<!--        type: 'GET',-->
<!--        success: resp => {-->
<!--          console.log(resp)-->
<!--          for (const data of resp.data) {-->
<!--            const formattedString = `${data.username} 于 ${data.createTime} 捐献了 ${data.amount}`;-->
<!--            broad.push(formattedString);-->
<!--            console.log(formattedString)-->
<!--          }-->
<!--          // 将数据填充到列表-->
<!--          populateList(broad);-->
<!--        }-->
<!--      })-->

<!--      function populateList(data) {-->
<!--        const listElement = document.querySelector('.list');-->
<!--        listElement.innerHTML = ""; // 清空原有内容-->
<!--        for (let i = 0; i < data.length; i++) {-->
<!--          const liElement = document.createElement("li");-->
<!--          liElement.className = "list-item" + (i + 1);-->
<!--          liElement.style.fontSize = "16px";-->
<!--          liElement.style.display = "flex";-->
<!--          liElement.style.color = '#FFF';-->
<!--          liElement.style.justifyContent = "center";-->
<!--          liElement.style.fontWeight = 'bold';-->
<!--          liElement.style.fontStyle = 'italic'-->
<!--          liElement.textContent = data[i];-->
<!--          listElement.appendChild(liElement);-->
<!--        }-->
<!--      }-->
<!--      // function formatTimestamp(timestamp) {-->
<!--      //-->
<!--      //   // 使用split分割字符串，提取日期和时间部分-->
<!--      //   const [datePart, timePart] = timestamp.split('T');-->
<!--      //-->
<!--      //   // 移除日期部分的时区信息（'+00:00'），使用正则表达式匹配并替换-->
<!--      //   const formattedDate = datePart.replace(/\+\d{2}:\d{2}/g, '');-->
<!--      //-->
<!--      //   // 移除时间部分的小数点和毫秒数，以及'T'前缀-->
<!--      //   const formattedTime = timePart.replace(/\.\d+/g, '').replace('T', '');-->
<!--      //-->
<!--      //   // 将时间部分的小时数前的0移除-->
<!--      //   const formattedHour = formattedTime.split(':')[0].replace(/^0/, '');-->
<!--      //-->
<!--      //   // 组合日期和格式化后的时间-->
<!--      //   return `${formattedDate} ${formattedHour}:${formattedTime.split(':')[1]}:${formattedTime.split(':')[2]}`.replace(/\+00$/g, '');;-->
<!--      // }-->

<!--</script>-->


<!--</div>-->
<!--<div class="mainbox">-->
<!--  <ul class="clearfix">-->
<!--    <li>-->
<!--      <div class="boxall" style="height: 3.2rem">-->
<!--        <div class="alltitle">捐款金额区间</div>-->
<!--        <div class="allnav" id="echart1"></div>-->
<!--        <div class="boxfoot"></div>-->
<!--      </div>-->
<!--      <div class="boxall" style="height: 3.2rem">-->
<!--        <div class="alltitle">捐款用处</div>-->
<!--        <div class="allnav" id="echart2"></div>-->
<!--        <div class="boxfoot"></div>-->
<!--      </div>-->

<!--      <div class="boxall" style="height: 3.2rem">-->
<!--        <div style="height:100%; width: 100%;">-->
<!--		  	<div class="sy" id="fb1"></div>-->
<!--				<div class="sy" id="fb2"></div>-->
<!--				<div class="sy" id="fb3"></div>-->
<!--		  </div>-->
<!--        <div class="boxfoot">-->

<!--		  </div>-->
<!--      </div>-->
<!--    </li>-->
<!--    <li>-->
<!--      <div class="bar">-->
<!--        <div class="barbox">-->
<!--          <ul class="clearfix">-->
<!--            &lt;!&ndash; 这个地方后面调用接口 &ndash;&gt;-->
<!--            <li class="pulll_left counter"></li>-->
<!--            <li class="pulll_left counter">10000000</li>-->
<!--          </ul>-->
<!--        </div>-->
<!--        <div class="barbox2">-->
<!--          <ul class="clearfix">-->
<!--            <li class="pulll_left">2024年总收赠情况 </li>-->
<!--            <li class="pulll_left">2024年总支出情况</li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="map">-->
<!--        <div class="map1"><img src="../blockchain-kindness/front/images/donations/lbx.png"></div>-->
<!--        <div class="map2"><img src="../blockchain-kindness/front/images/donations/jt.png"></div>-->
<!--        <div class="map3"><img src="../blockchain-kindness/front/images/donations/map.png"></div>-->
<!--        <div class="map4" id="map_1"></div>-->
<!--      </div>-->
<!--    </li>-->
<!--    <li>-->
<!--          <div class="boxall" style="height:3.4rem">-->
<!--        <div class="alltitle">捐款时间统计图</div>-->
<!--        <div class="allnav" id="echart4"></div>-->
<!--        <div class="boxfoot"></div>-->
<!--      </div>-->
<!--      <div class="boxall" style="height: 3.2rem">-->
<!--        <div class="alltitle">群众满意度</div>-->
<!--        <div class="allnav" id="echart5"></div>-->
<!--        <div class="boxfoot"></div>-->
<!--      </div>-->
<!--      <div class="boxall" style="height: 3rem;overflow: hidden">-->
<!--        <div class="alltitle">用户捐款公示播报</div>-->
<!--        <div class="allnav">-->
<!--            <ul class="list">-->
<!--            </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--        <div class="boxfoot"></div>-->
<!--    </li>-->
<!--  </ul>-->
<!--</div>-->
<!--<div class="back"></div>-->

<!--&lt;!&ndash; 此处可能存在隐式bug后续改错的时候需要进行注意 &ndash;&gt;-->
<!--<script type="text/javascript" src="../blockchain-kindness/front/js/china.js"></script>-->
<!--<script type="text/javascript" src="../blockchain-kindness/front/js/area_echarts.js"></script>-->
<!--<script language="JavaScript" src="../blockchain-kindness/front/js/js.js"></script>-->
<!--<script>-->
<!--  const oul = document.querySelector('.list');-->
<!--  let timeId;-->
<!--  function rollup(){-->
<!--    if(timeId)-->
<!--        clearInterval(timeId)-->
<!--    timeId = setInterval(()=> {-->
<!--      const firstElement = oul.firstElementChild-->
<!--      firstElement.classList.remove('list-item1')-->
<!--      firstElement.classList.add('hiden')-->
<!--      oul.appendChild(firstElement)-->
<!--      const elementChilds = Array.prototype.slice.call(oul.childNodes).filter(child => {-->
<!--        return child.nodeType === Node.ELEMENT_NODE-->
<!--      })-->
<!--      for (var i = 0; i < elementChilds.length; i++) {-->
<!--        elementChilds[i].className = `list-item${i + 1}`-->
<!--      }-->
<!--      rollup()},2000)-->
<!--    rollup()-->
<!--  }-->
<!--  rollup()-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
        name="viewport">
  <title>链上善行公益-大数据可视化平台</title>
  <link href="front/images/logo1.png" rel="shortcut icon" type="image/png">
  <link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

  <link rel="stylesheet" href="background/modules/summernote/summernote-lite.css">
  <link rel="stylesheet" href="background/modules/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="background/css/demo.css">
  <link rel="stylesheet" href="background/css/style.css">
  <link rel="stylesheet" href="background/css/common.css"/>
  <link rel="stylesheet" href="common/datatable/dataTables.bootstrap4.min.css"/>
  <link rel="stylesheet" href="background/css/xtiper.css"/>
  <script src="background/js/message.js"></script>
</head>

<body>
  <div class="main-wrapper">
    <div th:replace="commons/admin-bar::sidebar(currUri='DataDetail')"></div>
    <div class="main-content" style="padding-top: 0px">
      <iframe
              src="bigData"
              width="105%"
              style="position:relative;
          left: -28px;
          "
      >
      </iframe>
    </div>
  </div>
<!--<template style="display: none">-->
<!--  <el-button-->
<!--          plain-->
<!--          @click="open1">-->
<!--    右上角-->
<!--  </el-button>-->
<!--  <el-button-->
<!--          plain-->
<!--          @click="open2">-->
<!--    右下角-->
<!--  </el-button>-->
<!--  <el-button-->
<!--          plain-->
<!--          @click="open3">-->
<!--    左下角-->
<!--  </el-button>-->
<!--  <el-button-->
<!--          plain-->
<!--          @click="open4">-->
<!--    左上角-->
<!--  </el-button>-->
<!--</template>-->
  <script>
    var iframe = document.querySelector('iframe');
    window.addEventListener('DOMContentLoaded', function() {
      iframe.style.height = window.innerHeight + 'px';
    });
  </script>
<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/popper.js"></script>
<script src="background/modules/tooltip.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>

<script src="background/modules/chart.min.js"></script>
<script src="background/modules/summernote/summernote-lite.js"></script>

<script src="background/js/scripts.js"></script>
<script src="background/js/custom.js"></script>
<script src="background/js/demo.js"></script>
<script src="common/datatable/jquery.dataTables.min.js"></script>
<script src="common/datatable/dataTables.bootstrap4.min.js"></script>
<script src="common/js/board.js"></script>
<script src="background/js/xtiper.min.js"></script>
</body>
</html>

